<template>
	<view class="content" :style="theme">
		<view class="tab flex">
			<view v-for="(item, index) in tabList" :key="index" :class="tabIndex===index?'on':''"
				@click="tabChange(index)">
				<image v-if="tabIndex===index" :src="imgHost + item.img2"></image>
				<image v-else :src="imgHost + item.img"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<block v-if="tabIndex === 0">
			<view class="addressCnt">
				<view class="address" :class="addressId?'':'no'" @click="jump('/pages/home/addr?isSelect=1')">
					<image :src="imgHost + '/ic_location@2x.png'"></image>
					<view v-if="addressId" class="desc">
						<view class="flex_center">{{addressCnt.receiverName }}
							<text>{{addressCnt.receiverPhone}}</text>
						</view>
						<view>{{addressCnt.province || ''}}{{addressCnt.city || ''}}{{addressCnt.area || ''}}{{addressCnt.address || ''}}</view>
					</view>
					<view v-else class="desc">
						<view class="noAddress">请选择地址</view>
					</view>
					<u-icon name="arrow-right" color="#999999" size="26rpx"></u-icon>
				</view>
			</view>
		</block>
		<block v-if="tabIndex === 1">
			<view class="addressCnt">
				<view v-if="shopHome == 1 && deptInfo.name" class="address" @click="jump('/pages/venue/ztd')">
					<image :src="imgHost + '/ic_address@2x.png'"></image>
					<view class="desc">
						<view class="flex flex_between">自提点：{{deptInfo.name}}</view>
						<view>{{deptInfo.detailedAddress?deptInfo.address + deptInfo.detailedAddress:deptInfo.address}}</view>
					</view>
					<u-icon name="arrow-right" color="#999999" size="26rpx"></u-icon>
				</view>
				<view v-else-if="shopHome == 1 && !deptInfo.name" class="address" @click="jump('/pages/venue/ztd')">
					<image :src="imgHost + '/ic_address@2x.png'"></image>
					<view class="desc">
						<view class="noAddress" style="margin-top: 10rpx;">请选择自提点</view>
					</view>
					<u-icon name="arrow-right" color="#999999" size="26rpx"></u-icon>
				</view>
				<view v-if="shopHome != 1" class="address">
					<image :src="imgHost + '/ic_address@2x.png'"></image>
					<view class="desc">
						<view class="flex flex_between">自提点：{{deptInfo.name}}</view>
						<view>{{deptInfo.detailedAddress?deptInfo.address + deptInfo.detailedAddress:deptInfo.address}}</view>
					</view>
				</view>
				<view v-if="deptInfo.openTimeStart || deptInfo.openTime" class="yytime mt20">
					营业时间：
					<text v-if="deptInfo.openTimeStart">{{deptInfo.openTimeStart}} ~ {{deptInfo.openTimeEnd}}</text>
					<text v-else>{{deptInfo.openTime}}</text>
				</view>
			   <view v-if="deptInfo.telephone || deptInfo.phone" class="yytel mt20">联系电话：<text>{{deptInfo.telephone || deptInfo.phone }}</text></view>
			</view>
		</block>
		<view class="card">
			<view class="title">商品信息</view>
			<view class="details">
				<view v-for="(item,index) in list" :key="index" class="info flex flex_between">
					<image :src="item.img_url?item.img_url:imgHost + 'default_pic.png'" mode="aspectFit"
						class="left"></image>
					<view class="right">
						<view class="bt">{{item.name}}</view>
						<!-- <view v-if="item.goodTag ||item.details" class="author" @click="tzxq(item)">
							{{item.goodTag ||item.details}}</view> -->
						<view class="price flex flex_between">
							<view>{{item.price}}<text class="ml10">积分</text></view>
							<view class="you flex">
							<!-- 	<view>
									<u-icon name="minus" color="#979797" size="20rpx" @click="changeNum(0,item,index)">
									</u-icon>
								</view> -->
								<text class="num">x 1</text>
								<!-- <view>
									<u-icon name="plus" color="#979797" size="20rpx" @click="changeNum(1,item,index)">
									</u-icon>
								</view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="hj">合计：<text class="num f32 fw5 redColor">{{receiveAmount || 0}}</text><text class="ml10">积分</text></view>
			</view>
		</view>
		<view class="box_active_footer flex flex_between">
			<view class="box_active_footer_money flex">
				<text class="f28 c3">合计：</text>
				<text class="f36 fw5 redColor">{{receiveAmount || 0}}</text>
				<text class="ml10">积分</text>
			</view>
			<view class="box_active_footer_btn f30 cf fw5" @click="$noMultipleClicks(payBtn)">立即兑换</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: [{
					img: '/ic_wuliu.png',
					img2: '/ic_wuliu_sel.png',
					name: '快递'
				}, {
					img: '/ic_daodian.png',
					img2: '/ic_daodian_sel.png',
					name: '自提'
				}],
				password: '',
				list: [],
				noClick: true,
				current: 0,
				note: '',
				addressId: '',
				addressCnt: {},
				deptInfo: {},
				info: {},
				showPd: false,
				receiveAmount: 0,
				id: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
			this.getAddress()
			if(this.shopHome == 1) {
				this.selectByPageListForMini()
			} else {
				this.getCG()
			}
			uni.$on('callback', (res) => {
				console.log(res, '更新');
				this.addressCnt = res
				this.addressId = res.id
			})
			uni.$on('callback3', (res) => {
				console.log(res, '更新3');
				this.deptInfo = res
			})
			
		},
		onUnload() {
			uni.$off('callback');
			uni.$off('callback3');
		},
		methods: {
			getDetail() {
				this.$app.ajax({
					api: this.$api.goodsInfo(),
					data: {
						param: {
							memberId: this.userInfo.id,
							id: this.id
						}
					},
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.list = [res.record]
						this.getOrderMoney()
					} else {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				}).catch(() => {})
			},
			selectByPageListForMini() {
				this.$app.ajax({
					api: this.$api.selectByPageListForMini(),
					data: {
						param: {
							memberId: this.userInfo.id
						}
					},
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.deptInfo = res.recordList[0]
					} 
				}).catch(() => {})
			},
			getAddress() {
				this.$app.ajax({
					data: {},
					api: this.$api.addressDefault()
				}).then((res) => {
					if (res.errorCode == '000000') {
						if (res.record) {
							this.addressCnt = res.record
							this.addressId = res.record.id
						}
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			getCG() {
				this.$app.ajax({
					data: {
						param: {
							lat: '',
							lng: '',
							openStatus: '1'
						}
					},
					api: this.$api.getVenue()
				}).then((res) => {
					if (res.errorCode === '000000') {
						let arr = res.recordList
						let index = 0
						if (this.venueId) {
							arr.forEach((e, dex) => {
								if (e.id === this.venueId) {
									index = dex
								}
							})
						}
						this.deptInfo = arr[index]
					}
				}).catch(() => {})
			
			},
			getOrderMoney() {
				let arr = this.list
				let receiveAmount = 0
				arr.forEach((s)=>{
					receiveAmount = receiveAmount + (Number(s.price))
				})
				this.receiveAmount = receiveAmount.toFixed(2)
				// if (this.tabIndex == 0 && !this.addressId) {
				// 	return this.$app.showToast('请先选择收获地址')
				// }
			},
			payBtn() {
				let that = this
				if (this.tabIndex == 0) {
					if (!this.addressId) {
						return this.$app.showToast('请先选择收获地址')
					}
				}
				this.$app.ajax({
					data: {
						param: {
							memberId: this.userInfo.id,
							goodsId: this.id,
							venueId: this.venueId,
							claimType: this.tabIndex == 0 ? '0' : '1',
							adddressId: this.tabIndex == 0 ?this.addressId: this.deptInfo.id,
							memberId: this.userInfo.id
						},
					},
					api: this.$api.goodsRedeem()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.$app.showToast('兑换成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			tabChange(index) {
				this.tabIndex = index
			},
			changeNum(pd, em, index) { //适用于根据数量改变购物车
				var that = this;
				var carList = [...this.list];
				let num
				if (pd == 0) {
					if (em.num <= 1) {
						this.$app.showToast('不能减少了')
						return false;
					}
					num = em.num - 1
				} else {
					if (em.num >= em.stock) {
						this.$app.showToast('库存不足')
						return false;
					}
					num = em.num + 1
				}
				this.list[index].num = num
				this.getOrderMoney()
			},
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jump3(url, params, a) {
				this.$app.jump3(url, params, a);
			}
		}
	}
</script>
<style>
	page {
		background: #F7F4FF;
	}
</style>
<style lang="scss" scoped>
	.flex {
		align-items: center;
	}

	.content {
		padding-bottom: 130rpx;
	}

	.tab {
		padding-top: 20rpx;

		view {
			font-size: 30rpx;
			color: #333333;
			height: 88rpx;
			text-align: center;
			width: 50%;
			line-height: 88rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				vertical-align: middle;
				margin-right: 10rpx;
			}

			&.on {
				background-color: #fff;
				font-weight: Medium;
				border-radius: 20px 20px 0px 0px;
			}
		}
	}

	.addressCnt {
		background: #FFF;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.address {
			display: flex;

			&.no {
				align-items: center;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				flex: none;
				margin-top: 10rpx;
				margin-right: 30rpx;
			}

			.desc {
				flex: 1;

				view {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: Medium;
					color: #111111;
					line-height: 1.5;

					text {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: normal;
						color: #666666;
						margin-left: 20rpx;
					}

					&:nth-of-type(2) {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}

		}

		.yytime {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;

			text {
				color: #333333;
			}
		}

		.yytel {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;

			text {
				color: $color;
			}
		}
	}

	.card {
		background: #FFF;
		margin-bottom: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.title {
			font-size: 34rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: bolder;
			color: #111111;
		}

		.details {
			.info {
				padding: 20rpx 0 0;
				box-sizing: border-box;
				margin-bottom: 30rpx;

				.left {
					width: 144rpx;
					height: 144rpx;
					border-radius: 8rpx;
					flex: none;
				}

				.right {
					margin-left: 30rpx;
					flex: 1;
					position: relative;

					.bt {
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: Medium;
						color: #222222;
					}

					.author {
						font-size: 24rpx;
						margin-top: 10rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(51, 51, 51, 0.9);
					}

					.price {
						font-size: 30rpx;
						color: #222222;
						margin-top: 20rpx;

						.you {
							view {
								width: 44rpx;
								height: 44rpx;
								display: flex;
								justify-content: center;
								box-sizing: border-box;
								background: #FFFFFF;
								border-radius: 50%;
								border: 1px solid #CCCCCC;
								text-align: center;
							}

							text {
								display: inline;
								text-align: center;
								width: 100rpx;
								color: #222222;
							}
						}

					}
				}
			}

		}

		.hj {
			color: #333333;
			text-align: right;
		}

	}


	.box_active_footer {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #ffffff;
		margin-bottom: env(safe-area-inset-bottom);
		z-index: 88;
		box-sizing: border-box;
		padding: 0 30rpx;
		.box_active_footer_money {
			.f24 {
				margin-top: 6rpx;
			}
		}
		.box_active_footer_btn {
			width: 200rpx;
			flex: none;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: $color;
			border-radius: 40rpx;
		}
	}
</style>